<template>
  <div id="system6">
    <el-container class="cont">
      <el-aside class="padding_10" width="240px">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <span>功能项</span>
          </div>
          <Tree
            ref="tree"
            :data="data"
            idKey="System_6_10"
            pIdKey="System_6_70"
            nameKey="System_6_20"
            @current-change="onNodeClick"
          >
          </Tree> </el-card
      ></el-aside>
      <el-main class="padding_10">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <span>功能编辑</span>
            <el-button-group style="float:right">
              <el-button type="primary" icon="el-icon-plus" size="mini">
                新增
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit"
              >
                修改
              </el-button>
              <el-button type="primary" icon="el-icon-delete" size="mini"
                >删除</el-button
              >
            </el-button-group>
          </div>
          <Form ref="form" @onSave="onSave" :data="formData"></Form>
        </el-card>
        <el-card shadow="hover" style="margin-top:20px" class="box-card">
          <div slot="header" class="clearfix">
            <span>功能按钮</span>
            <el-button-group style="float:right">
              <el-button icon="el-icon-plus" size="mini">新增按钮</el-button>
            </el-button-group>
          </div>
          <Grid :data="gridData" @onSys8Save="onSys8Save"> </Grid>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { System6 } from "@/api";
import Tree from "./components/Tree";
import Form from "./components/Form";
import Grid from "./components/Grid";
export default {
  name: "system6",
  data: () => ({ data: [], formData: {}, gridData: [], activeNames: ["1"] }),
  methods: {
    //数节点选择
    async onNodeClick(data, node) {
      this.formData = { ...data };
      let sys8data = await System6.getSystem8(data.System_6_10);
      this.gridData = sys8data;
    },
    async onSave(res, data) {
      if (res.MsRbool) {
        this.data = await System6.get();
        this.$refs.tree.$once("onInited", tree => {
          tree.setCurrentKey(data.System_6_10);
        });
      }
    },
    async onSys8Save(res, data) {
      if (res.MsRbool) {
        let sys8data = await System6.getSystem8(data.System_8_40);
        this.gridData = sys8data;
      }
    },
    edit() {
      this.$refs.form.setDisabled(false);
    }
  },
  components: { Tree, Form, Grid },
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: "加载中..."
    });
    this.data = await System6.get();
    this.$refs.tree.$once("onInited", tree => {
      tree.setCurrentKey(this.data[0].System_6_10);
      this.onNodeClick(this.data[0]);
      loading.close();
    });
  }
};
</script>

<style>
.cont {
  height: 100%;
}
</style>
